<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>答题</title>
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<meta name="author" content="" />
<meta name="renderer" content="webkit">
<meta content='target-densitydpi=device-dpi, width=640' name='viewport'>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<meta name="format-detection" content="telephone=no">
<link href="style/css.css" rel="stylesheet" type="text/css" />
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<style type="text/css">
	.ys {
		color: #d30101;
	}
</style>
<script>
	/*不同分辨率手机加载*/
	var userScalable = "no";
	var ins = "";
	(function () {
		if (window.devicePixelRatio === 1.5) {
			userScalable = "yes";
			ins = "initial-scale=0.5"
		}
		var text = "<meta content='" + ins + ", target-densitydpi=device-dpi, width=640,user-scalable=" + userScalable + "' name='viewport'>";
		document.write(text);
	})();
</script>
</head>
<body>
<div id="answer" class="w640">
	<header>
		<div class="hm_icon"><a href="index.html"><img src="images/home_icon.png" alt=""></a></div>
		<div class="chapter_title">
			剩余时间：<span id="date_span"></span>
		</div>
	</header>
	<div id="bodyer">
	</div>
</div>
<div id="score" class="w640" style="display:none;">
	<header>
		<div id="fs"></div>
	</header>
	<div class="hm_text02"><img src="images/text02.png" alt=""></div>
	<div class="hm_btn">
		<div class="btn_bg"><a href="chapter.html">试卷一</a></div>
	</div>
</div>
<script type="text/javascript">

	$(function () {

        const every_time = 10;
        //计数时间
        var nums = every_time;
        //倒计时
        var clock;
        //当前题目
        var pro_index = 1;
        //总的题目数
        var total = $("#bodyer").children().size() == 0 ? 10 : $("#bodyer").children().size();

        var fractionArray = new Array();
        for(var i=0;i<total;i++) {
            fractionArray[i] = 0;
        }

        initPage();
        /**
         * 产生随机整数，包含下限值，包括上限值
         * @param {Number} lower 下限
         * @param {Number} upper 上限
         * @return {Number} 返回在下限到上限之间的一个随机整数
         */
        function random(lower, upper) {
            return Math.floor(Math.random() * (upper - lower+1)) + lower;
        }

        /**
		 * 产生20以内随机数
         */
        function random20() {
            return random(0, 20);
        }

        /**
         * 产生40以内随机数,并且结果不是传入的参数
         */
        function random40(v) {
            while (true) {
                let r = random(0, 40);
                if(r != v) {
                    return r;
				}
			}

        }

        /**
		 * 生成包括正确答案的四个选项
         */
        function randomAnswerRadio(currentVal) {
            let redio_answ = new Array();
            let current_index = random(0, 3);
            if(current_index == 0) {
                redio_answ[0] = {"a" : currentVal, "s": true};
                redio_answ[1] = {"a" : random40(currentVal), "s": false};
                redio_answ[2] = {"a" : random40(currentVal), "s": false};
                redio_answ[3] = {"a" : random40(currentVal), "s": false};
			} else if(current_index == 1) {
                redio_answ[0] = {"a" : random40(currentVal), "s": false};
                redio_answ[1] = {"a" : currentVal, "s": true};
                redio_answ[2] = {"a" : random40(currentVal), "s": false};
                redio_answ[3] = {"a" : random40(currentVal), "s": false};
            } else if(current_index == 2) {
                redio_answ[0] = {"a" : random40(currentVal), "s": false};
                redio_answ[1] = {"a" : random40(currentVal), "s": false};
                redio_answ[2] = {"a" : currentVal, "s": true};
                redio_answ[3] = {"a" : random40(currentVal), "s": false};
            } else {
                redio_answ[0] = {"a" : random40(currentVal), "s": false};
                redio_answ[1] = {"a" : random40(currentVal), "s": false};
                redio_answ[2] = {"a" : random40(currentVal), "s": false};
                redio_answ[3] = {"a" : currentVal, "s": true};
			}

			return redio_answ;
		}



        function initPage() {
            for (var i = 1; i < total+1; i++) {
                //问题标题
				let title = "问题" + i;
				//问题
				let request;
				//答案选项
				let redio_answ;
				let left = random(0, 20);
				let right = random(0,20);
				//正确答案
                let real_val;
				if(i%2==0) {
                     request = left + " + " + right + " =";
                     real_val = left + right;
                     redio_answ = randomAnswerRadio(real_val);

				} else {
				    if(left > right) {
				        request = left + " - " + right + " =";
				        real_val = left - right;
                        redio_answ = randomAnswerRadio(real_val);
					} else {
                        request = right + " - " + left + " =";
                        real_val = right - left;
                        redio_answ = randomAnswerRadio(real_val);
					}
				}

                let div_req = `<div id="q${i}" style="display:none;">
									<div class="content">
										<p class="subject_t">${i}、${request}</p>
										<p><span><input id="rd${i}_1" name="rd${i}" type="radio" value="${redio_answ[0].s}"></span><label for="rd1_1">A.${redio_answ[0].a}</label></p>
										<p><span><input id="rd${i}_2" name="rd${i}" type="radio" value="${redio_answ[1].s}"></span><label for="rd1_2">B.${redio_answ[1].a}</label></p>
										<p><span><input id="rd${i}_3" name="rd${i}" type="radio" value="${redio_answ[2].s}"></span><label for="rd1_3">C.${redio_answ[2].a}</label></p>
										<p><span><input id="rd${i}_4" name="rd${i}" type="radio" value="${redio_answ[3].s}"></span><label for="rd1_4">D.${redio_answ[3].a}</label></p>
									</div>
									<div id="msg${i}" class="no_choice" style="display:none;">您还没选择！</div>
									<div class="enter_btn problem_bt"><a href="javascript:void(0);">确定</a></div>
								</div>
								<div id="a${i}" style="display:none;">
									<div class="content_jd">
										<p>正确解答：</p>
										<p><font class="ys">${real_val}</font></p>
										<span id="r${i}" class="right" style="display:none;"></span>
										<span id="w${i}" class="wrong" style="display:none;"></span>
									</div>
									<div class="enter_btn next_bt"><a href="javascript:void(0);">下一题</a></div>
								</div>`;

                $("#bodyer").append(div_req);
            }

            $("#q1").css("display", "inline");
		}

		
		$(".problem_bt").each(function (i) {

                $(this).click(function () {
                   pro_submit(i+1);
                });

        });

		$(".next_bt").each(function (i) {
		    if(i == $(".next_bt").length-1) {
                $(this).click(function () {
                    final_result();
                });
			} else {
                $(this).click(function () {
                    pro_next(i+1);
                })
			}


        });

        

        //启动倒计时
        $("#date_span").html(every_time);
        clock = setInterval(function () {
            doLoop();
        }, 1000);
		//倒计时
		function doLoop() {
            nums--;
            if(nums > 0) {
                $("#date_span").html(nums);
            } else {
                refresh()
			}
        }
        //倒计时结束进入下一题
		function refresh() {
            console.log("当前题目1：" + pro_index);
            clearInterval(clock);
            if(pro_index < 10) {
                //显示下一道题
				$(`#q${pro_index}`).fadeOut(100);
				$(`#q${pro_index+1}`).fadeIn(1000);
                pro_index++;
                nums=every_time;
                clock = setInterval(function () {
                    doLoop();
                }, 1000);
			} else {
                console.log("最后一道题隐藏");
                $("#answer").fadeOut(10);
                $("#score").fadeIn(1000, function () {
                    getFinalResult();
                });

			}

		}



        function pro_next(i) {
            $(`#a${i}`).fadeOut(100);
            $(`#q${i+1}`).fadeIn(1000);
            pro_index++;
            nums=every_time;
            $("#date_span").html(every_time);
            clock = setInterval(function () {
                doLoop();
            }, 1000);
        }
        
        function final_result() {
            $("#answer").fadeOut(10);
            getFinalResult();
            $("#score").fadeIn(1000);
        }
        function pro_submit(i) {
            console.log("----------------------"+i);
            clearInterval(clock);
            var answer = $(`#q${i} input:radio[name="rd${i}"]:checked`).val();
            if (answer == null) {
                $(`#msg${i}`).fadeIn(500);
            }
            else {
                $(`#q${i}`).fadeOut(100);
                $(`#a${i}`).fadeIn(1000);
                if (answer == "true") {
                    fractionArray[i-1] = 1;
                    $(`#r${i}`).slideDown();
                }
                else {
                    $(`#w${i}`).slideDown();
                }
            }
        }

		function getFinalResult() {
            let sc = 0;
		    for(var i=0;i<fractionArray.length;i++) {
		        sc+=fractionArray[i];
			}

            if (sc == 0) {
                $('#fs').addClass("f0");
            } else if (sc == 1) {
                $('#fs').addClass("f10");
            } else if (sc == 2) {
                $('#fs').addClass("f20");
            } else if (sc == 3) {
                $('#fs').addClass("f30");
            } else if (sc == 4) {
                $('#fs').addClass("f40");
            } else if (sc == 5) {
                $('#fs').addClass("f50");
            } else if (sc == 6) {
                $('#fs').addClass("f60");
            } else if (sc == 7) {
                $('#fs').addClass("f70");
            } else if (sc == 8) {
                $('#fs').addClass("f80");
            } else if (sc == 9) {
                $('#fs').addClass("f90");
            } else if (sc == 10) {
                $('#fs').addClass("f100");
            }
        }
	});
</script>
</body>
</html>